<template>
	<view class="page">
    <view style="text-align: center">
      <swiper style="height: 400rpx;z-index: -1" indicator-active-color="$uni-color-primary" indicator-color="rgba(51, 51, 51, 0.1)"
              :circular="true" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
        <swiper-item v-for="(item , index) in roomDetail.imgs" :key="index">
          <image :src="item" @click="homeSlidePreviewImage(index)" mode="heightFix"></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="wrap" style="margin-top: -120rpx;position: relative">
			<view class="room">
				<view class="roomInfo">
					<view class="title" style="font-weight: bolder">
						{{roomDetail.name}}
					</view>
					<view class="status">
						{{roomDetail.useStatus===99?'包厢停用':roomDetail.useStatusLabel}}
					</view>
					<view class="tip">
						<view class="title" style="display: none">
							预定须知：
						</view>
						<view class="txt">
							预定成功后，请按预约时间及时确认到店消费，若无法到店消费，可联系客服取消订单；预约时间到期前，可以自主续单延时，请提前规划好预约时段。
						</view>
					</view>
				</view>
			</view>
			<view class="timeContent">
				<view class="head">
					选择到店时间
				</view>
				<view class="center">
					<view class="flowx">
						<view class="dateList">
							<view v-for="(item,index) in dateList" :class="item.choose?'item active':'item'"
								:key="index" @click="changeDate(index)">
								<view v-if="!item.isMore">{{item.month}}月{{item.day}}日</view>
								<view v-if="!item.isMore">{{item.week}}</view>
								<view v-if="item.isMore" class="more">更多</view>
              </view>
						</view>
					</view>

					<view class="hours">
						<view>时长选择：</view>
						<view v-for="(item2,index2) in hourChooseList" :key="index2"
							:class="item2.value===hourChooseSatatus?'item active':'item'"
							@click="changeHourStatus(item2)">
							{{item2.name}}
						</view>
					</view>
					<view class="customer" v-if="showCustomHour">
						共{{hours}}小时
						<text class="icon reduce" @click="reduceHour()">-</text>
						{{hours}}
						<text class="icon add" @click="addHour()">+</text>
					</view>

					<view class="hourlist" :style="'height:'+(winHeight-950)+'rpx'">
						<view v-for="(item,index) in hourList" :key="index" :class="item.selected?'item active':(item.status===0||item.status===1||item.status===2||item.status===6||item.status===99)?'item disabled':'item'"
							@click="chooseHour(item,index)">
							<view class="title">
								{{item.hour}}
							</view>
							<view class="status">
                <span v-if="item.nowDay" style="color: #FF50A5;font-weight: bold">
                  (次日)
                </span>
								{{item.status===0?'已售':item.status===1?'使用中':item.status===2?'保洁':item.status===6?'时长不足':item.status===-1?'空闲':item.status===99?'不可用':''}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="time">
				{{footerTime || '暂未选择时间'}}
				<text style="display: inline-block;margin-left: 20px;color: #FF50A5;font-weight: bold">共{{confirmInfo.hour}}小时</text>
			</view>
			<view class="btns">
				<view class="left">
          <view v-if="vipPrice" class="price-text">会员价</view>
					￥{{vipPrice || '0'}}
          <view v-if="price" class="price-text" style="margin-left: 20rpx">原价￥{{price}}</view>
				</view>
				<view class="right" @click="beforeReservation()">
					预约
				</view>
			</view>
		</view>

    <modal :show="rechargeDialog" @close="rechargeDialog = false" @cancel="rechargeDialog = false" :show-footer="false"
           :show-confirm="false" :show-cancel="false" confirm-text="确定" cancel-text="关闭">
      <view class="recharge-dialog">
        <view class="title">温馨提醒</view>
        <view class="content">
          充值成为会员，本单立省
          <span class="diff-price">{{price - vipPrice}}</span>
          元。
        </view>
        <view style="margin-top: 20rpx">
          <view class="recharge-item" v-for="(item, itemKey) in rechargeGiveList" :key="itemKey" v-if="rechargeGiveList.length > 0">
            <view style="margin: auto;display: flex">
              充
              <view style="font-weight: bold;margin: 0 10rpx">{{ item.retailPrice }}</view>
              元，送
              <view style="font-weight: bold;margin: 0 10rpx;color: #FF50A5">{{ item.faceValue - item.retailPrice }}</view>
              元
            </view>
          </view>
        </view>
        <view class="recharge-dialog-btns">
          <view class="cancel-btn" @click="reservation()">
            直接下单
          </view>
          <view class="confirm-btn" @click="reLaunch('/pages/tea/voucher/index?tabIndex=1',1)">
            我要优惠
          </view>
        </view>
      </view>
    </modal>
	</view>
</template>

<script>
import util from '@/libs/util.js'
import globalConfig from '../../../config'
import wPicker from "@/components/w-picker/w-picker.vue";
import Modal from '@/components/neil-modal/neil-modal.vue';
import MyTabs from '@/components/my-tabs.vue'

const baseHttp = globalConfig.API_HOST

export default {
		data() {
			return {
				roomId: '',
				roomDetail: {},
				dateList: [],
        timeSelectOptions: [],
        moreDateSelectShow: false,
				hourChooseList: [],
        defaultHourChooseList: [{
          name: '6小时',
          value: '6'
        },
          {
            name: '4小时',
            value: '4'
          },
          {
            name: '2小时',
            value: '2'
          },
          {
            name: '更多',
            value: '0'
          }
        ],
				hourChooseSatatus: '6',
				hours: 6, //当前选中的小时
				showCustomHour: false,
				hourList: [],
				footerTime: '',
				selectHourItem: {}, //选中的时间
				confirmInfo: {
					date:{},
					time:{},
					hour:0
				},
				price:0,
				vipPrice:0,
				useTimeRange:[],
				winHeight:0,
				clearConfigList: [],//后台保洁配置
        rechargeDialog: false,
        rechargeGiveList: [],
				disabled:false,
        user: {},
			}
		},
		onLoad(params) {
			this.roomId = params.roomId
      const accountInfo = uni.getAccountInfoSync();
			this.getRoomDetail()
			this.getUserInfo()
		},
		onShow() {
			let self = this
			uni.getSystemInfo({
				success: function (res) {
					let width = res.windowWidth
					self.winHeight = parseInt(750*res.windowHeight/width)
				}
			});
		},
		components: {
			wPicker,
			Modal,
			MyTabs
		},
		methods: {
			...util,
      homeSlidePreviewImage(index) {
        let imgs = this.roomDetail.imgs.map( item =>{
          return item
        })
        uni.previewImage({
          urls:imgs,
          current:index
        })
      },
      getRechargeGive() {
        this.$api.post('/api/recharge/list', {
          shopId: this.roomDetail.shopId
        }).then((response) => {
          if (response.code === "SUCCESS") {
            this.rechargeGiveList = response.result;
          }
        });
      },
      getUserInfo() {
        this.$api.post('/api/userInfo/profile', {}).then((response) => {
          if (response.code === "SUCCESS") {
            this.user = response.result
          }
        })
      },
			getClearConfig(){
				this.$api.post('/api/clean/getConfig', {
					deptId:this.roomDetail.shopId
				}, ).then((res) => {
					if (res.code === 'SUCCESS') {
						if(res.result.cleanerSwitch && res.result.cleanerSwitch == 1) {
              this.clearConfigList = res.result.configList
            }
						this.getUseTimeRange()
					}
				})
			},

			//获取房间详情
			getRoomDetail() {
				this.$api.post('/api/room/detail', {
					roomId: this.roomId
				}, ).then((res) => {
					if (res.code === 'SUCCESS') {
						if(!res.result.status){
							res.result.useStatus = 99
						}
						this.roomDetail = res.result
						this.timeSelectOptions = this.roomDetail.timeSelectOptions
            if(this.timeSelectOptions) {
              this.timeSelectOptions.forEach((timeSelectOption) => {
                this.hourChooseList.push(
                    {
                      name: timeSelectOption + '小时',
                      value: timeSelectOption
                    }
                )
              })
              this.hourChooseList.push(
                  {
                    name: '更多',
                    value: '0'
                  });

              this.hourChooseSatatus = this.timeSelectOptions[0];
              this.hours = parseInt(this.timeSelectOptions[0]);
            } else {
              this.hourChooseList = this.defaultHourChooseList;
            }
						this.getClearConfig()
            this.getRechargeGive();
					}
				})
			},

			//获取房间已售时间段
			getUseTimeRange(){
				this.$api.post('/api/room/getUseTimeRange',
				    {
				      roomId: this.roomId,
				    }
				).then((response) => {
					/*
						status字典项
						0-空闲
						1-使用中
						2-保洁
						3-结束
					*/
					 if (response.code === "SUCCESS") {
						 response.result.forEach((item) => {
						  	 item.startTime = new Date(item.startTime).getTime()
							 item.endTime = new Date(item.endTime).getTime()
						 })
						 this.useTimeRange = response.result
						 this.getDateList()
					 }
				})
			},

			//获取日期列表
			getDateList() {
				let number = 7;
				let dateList = []
				for (let i = 0; i < number; i++) {
					dateList.push(this.getAfterDate(i))
				}
        dateList.push({
          choose: false,
          isMore: true
        })
				this.dateList = dateList
				this.confirmInfo.date = this.dateList[0]
				this.getHourList(this.dateList[0])

			},

			getAfterDate(n) {
				// n是今天之后的天数，n=1 -> 明天
				var d = new Date();

				var year = d.getFullYear();
				var month = d.getMonth() + 1;
				var day = d.getDate();
				var days = d.getDay() // 星期几，0-6,0是周日
				if (day <= n) {
					if (month > 1) {
						month = month + 1;
					} else {
						year = year + 1;
						month = 12;
					}
				}
				d.setDate(d.getDate() + n)
				year = d.getFullYear();
				month = d.getMonth() + 1;
				day = d.getDate();
				days = d.getDay();
				if (month < 10) {
					month = '0' + month
				}
				if (day < 10) {
					day = '0' + day
				}
				if (days == 0) {
					days = '周日'
				} else if (days == 1) {
					days = '周一'
				} else if (days == 2) {
					days = '周二'
				} else if (days == 3) {
					days = '周三'
				} else if (days == 4) {
					days = '周四'
				} else if (days == 5) {
					days = '周五'
				} else if (days == 6) {
					days = '周六'
				}
				let now = year+'-'+month+'-'+day
				let nextDay = this.getNextDay(now)

				let obj = {}
				if (n == 0) {
					// 今天
					obj.year = year
					obj.month = month
					obj.day = day
					obj.week = '今天'
					obj.choose = true
					obj.nextDay = nextDay

				} else {
					obj.year = year
					obj.month = month
					obj.day = day
					obj.week = days
					obj.choose = false
					obj.nextDay = nextDay
				}
        obj.isMore = false;
				return obj;
			},

			getNextDay(time){
				let date = new Date(time.replace(/-/g,'/')).getTime()
				date = date + 24*60*60*1000
				date = new Date(date)
				console.log(date)
				var month = date.getMonth() + 1;
				var day = date.getDate();
				if (month < 10) {
					month = '0' + month
				}
				if (day < 10) {
					day = '0' + day
				}
				return month+'-'+day
			},

			//切换时长选择
			changeHourStatus(source) {
				console.log(source)
				this.hourChooseSatatus = source.value
				if (source.value === '0') {
					this.hours = this.timeSelectOptions[0];
					this.showCustomHour = true
				} else {
					this.hours = parseInt(source.value)
					this.showCustomHour = false
				}
				this.clearHourList()
				this.changeHourDisabled()
			},

			//重置小时段选择
			clearHourList(){
				this.hourList.forEach((item) => {
					item.selected = false
				})
				this.confirmInfo.time = {}
				this.footerTime = ''
				this.confirmInfo.hour = 0
				this.price = 0
				this.vipPrice = 0
			},

			//减时长
			reduceHour() {
				if (this.hours > parseInt(this.timeSelectOptions[0])) {
          this.hours = parseInt(this.hours);
					this.hours -= 1
					this.clearHourList()
					this.changeHourDisabled()
				}
			},

			//加时长
			addHour() {
        this.hours = parseInt(this.hours);
				this.hours += 1
				this.clearHourList()
				this.changeHourDisabled()
			},

			getTimeStamp(year,month,day,hour,min,type){
				let time = year+'-'+month+'-'+day+' '+(hour<10?'0'+hour:hour)+':'+(parseInt(min)<10?'0'+min:min)+':00'
				time = new Date(time.replace(/-/g,'/')).getTime()
				if(type === 'next'){
					time = time + 24*60*60*1000
				}
				return time
			},

			//获取小时段列表
			getHourList(source) {
				let arr = []
				let nowDate = this.getTimeFormat()
				let nowHour = parseInt(nowDate.split(' ')[1].split(':')[0])
				let nowMin = parseInt(nowDate.split(' ')[1].split(':')[1])
				for (let i = 0; i < 24; i++) {
					let timArr = []
					if (source.week === '今天') {
						if (i === nowHour && nowMin <= 30) {
							if(nowMin < 28) {
								let min = nowMin+2
								timArr.push({
									hour: (i < 10 ? ('0' + i) : i) +':'+ (min<10?'0'+min:min),
									disabled: false,
									selected: false,
									status:-1,
									time:this.getTimeStamp(source.year,source.month,source.day,i,min,'now'),
									day:source.month+'月'+source.day+'日'
								})
							}
							timArr.push({
								hour: (i < 10 ? '0' + i : i) + ':30',
								disabled: false,
								selected: false,
								status:-1,
								time:this.getTimeStamp(source.year,source.month,source.day,i,30,'now'),
								day:source.month+'月'+source.day+'日'
							})
						}
						if (i === nowHour && nowMin>30 && nowMin<58) {
							console.log('222')
							let min = nowMin+2
							timArr.push({
								hour: (i < 10 ? ('0' + i) : i) +':'+ (min<10?'0'+min:min),
								disabled: false,
								status:-1,
								selected: false,
								time:this.getTimeStamp(source.year,source.month,source.day,i,min,'now'),
								day:source.month+'月'+source.day+'日'
							})
						}

						if (i > nowHour) {
							timArr = [{
									hour: (i < 10 ? '0' + i : i) + ':00',
									disabled: false,
									selected: false,
									status:-1,
									time:this.getTimeStamp(source.year,source.month,source.day,i,'0','now'),
									day:source.month+'月'+source.day+'日'
								},
								{
									hour: (i < 10 ? '0' + i : i) + ':30',
									disabled: false,
									selected: false,
									status:-1,
									time:this.getTimeStamp(source.year,source.month,source.day,i,'30','now'),
									day:source.month+'月'+source.day+'日'
								}
							]
						}
					} else {
						timArr = [{
								hour: (i < 10 ? '0' + i : i) + ':00',
								disabled: false,
								selected: false,
								status:-1,
								time:this.getTimeStamp(source.year,source.month,source.day,i,'0','now'),
								day:source.month+'月'+source.day+'日'
							},
							{
								hour: (i < 10 ? '0' + i : i) + ':30',
								disabled: false,
								selected: false,
								status:-1,
								time:this.getTimeStamp(source.year,source.month,source.day,i,'30','now'),
								day:source.month+'月'+source.day+'日'
							}
						]
					}


					arr = arr.concat(timArr)
				}
				for (let i = 0; i < 24; i++) {
					let timArr = []
					timArr = [{
							hour: (i < 10 ? '0' + i : i) + ':00',
							disabled: false,
							selected: false,
							status:-1,
							time:this.getTimeStamp(source.year,source.month,source.day,i,'0','next'),
							day:this.confirmInfo.date.month+'月'+this.confirmInfo.date.day+'日',
							nowDay:this.confirmInfo.date.nextDay
						},
						{
							hour: (i < 10 ? '0' + i : i) + ':30',
							disabled: false,
							selected: false,
							status:-1,
							time:this.getTimeStamp(source.year,source.month,source.day,i,'30','next'),
							day:this.confirmInfo.date.month+'月'+this.confirmInfo.date.day+'日',
							nowDay:this.confirmInfo.date.nextDay
						}
					]
					arr = arr.concat(timArr)
				}
				this.hourList = arr
				this.changeHourDisabled()
			},

			changeHourDisabled(){
				let self = this
				console.log('小时段列表')
				let hourList = self.hourList
				let useTimeRange = self.useTimeRange
				hourList.forEach((item) => {
					item.status = -1
					useTimeRange.forEach((item2) => {
						if(self.roomDetail.useStatus===99){
							 item.status = 99
							 return
						}
						let start =  item2.endTime
						if(self.roomDetail.useStatus === 2 && item2.endTime<new Date().getTime()) {
							start = new Date().getTime()
						}
						let end = start+item2.cleanReservedTime*60*1000
						if(item.time>start && item.time<=end){
							item.status = 2
						}else if(item.time>=item2.startTime && item.time<=item2.endTime){
							item.status = item2.status
						}else{
							if(item.status != -1){
								return false
							}
							let arr = []
							let number = 2*self.hours+1
							for(let i=0;i<number;i++){
								arr.push(item.time+(30*60*1000*i))
							}
							let isTrue = true
							arr.forEach((item3) => {
								if(item3>=item2.startTime && item3<=item2.endTime){
									isTrue = false
								}
							})
							if(!isTrue){
								// item.status = 6//时长不足
							}
						}

						let clearConfigList = self.clearConfigList
            if(clearConfigList && clearConfigList.length > 0) {
              let clearStart = clearConfigList[0].startTime
              let clearEnd = clearConfigList[0].endTime
              let hour = new Date(item2.endTime.replace(/-/g,'/')).getHours()
              let minute = new Date(item2.endTime.replace(/-/g,'/')).getMinutes()
              if(hour<Number(clearStart.split(':')[0])
                  || (hour===Number(clearStart.split(':')[0]) && minute<Number(clearStart.split(':')[1]))
                  || hour>Number(clearEnd.split(':')[0])
                  || (hour===Number(clearEnd.split(':')[0]) && minute<Number(clearEnd.split(':')[1]))){
                let start =  item2.endTime
                let end = this.getTimeFormat(start).split(' ')[0]+' '+clearConfigList[0].startTime
                end = new Date(end.replace(/-/g,'/')).getTime()
                if(start>end){
                  end = end + 24*60*60*1000
                }
                if(item.time>start && item.time<=end){
                  item.status = 2
                }
              }
            }
					})
				})
				self.hourList = hourList
			},

			getUseHours(source){
				let startTime = new Date(source.startTime.replace(/-/g,'/')).getTime()
				let endTime = new Date(source.endTime.replace(/-/g,'/')).getTime()
				let arr = []
				let num = parseInt(Math.ceil((endTime - startTime) / (30 * 60 * 1000)))
				arr[0] = this.getDateObj(startTime,source)
				for (let i = 1; i < num; i++) {
					let time = startTime + (30 * 60 * 1000 * i)
					arr.push(this.getDateObj(time,source))
				}
				arr.push(this.getDateObj(endTime,source))
				return arr
			},

			getDateObj(time,source){
				let date = new Date(time.replace(/-/g,'/'))
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				if(month<10){
					month = '0' + month
				}
				var day = date.getDate();
				if(day<10){
					day = '0' + day
				}
				var hours = date.getHours();
				if(hours<10){
					hours = '0' + hours
				}
				var min = date.getMinutes();
				if(min<10){
					min = '0' + min
				}
				let obj = {
					date: month+'月'+day+'日',
					hour: hours+':'+min,
					status:source.status
				}
				return obj
			},

			//切换日期
			changeDate(dindex) {
        this.moreDateSelectShow = true;
				this.clearHourList()
				this.selectHourItem = {}
				this.getHourList(this.dateList[dindex])
				this.dateList.forEach((item, index) => {
					if (index === dindex) {
						item.choose = true
						this.confirmInfo.date = item
					} else {
						item.choose = false
					}
				})
				this.hourList.forEach((item) => {
					item.selected = false
				})
			},

			//选择时间
			chooseHour(source,dindex) {
				if(source.status===0||source.status===1||source.status===2||source.status===6){
					return false
				}

        var extend = 1;
        if(!source.hour.endsWith("30") && !source.hour.endsWith("00")) {
          extend = 2;
        }
				this.hourList.forEach((item, index) => {
					if (index === dindex) {
						item.selected = true
						this.confirmInfo.time = JSON.parse((JSON.stringify(item)))
						this.getTimeRange()
					} else if (item.status == -1 && index < (dindex + this.hours * 2 + extend) && index > dindex) {
            item.selected = true
          } else {
						item.selected = false
					}
				})

        let number = this.confirmInfo.hour*2+1
        let arr = []
        for(let i=0;i<number;i++){
          arr.push(this.confirmInfo.time.time+(30*60*1000*i))
        }
        let isTrue = true
        this.useTimeRange.forEach((item) => {
          arr.forEach((item2) => {
            if(item2>=item.startTime && item2<=item.endTime){
              isTrue = false
            }
          })
        })

        if(!isTrue){
          uni.showToast({
            duration: 3000,
            title:'连续可用时长不足' + this.confirmInfo.hour + '小时，请重新选择',
            icon:'none',
            mask: true
          })
          return;
        }
			},

			//计算下单时间段
			getTimeRange() {
				let hour = this.confirmInfo.time.hour.split(':')[0]
				let min = this.confirmInfo.time.hour.split(':')[1]
				hour = parseInt(hour) + this.hours
				this.confirmInfo.time.nextDay = false
				if(hour>=24){
					hour = hour-24
					if(hour<10){
						hour = '0'+hour
					}
					this.confirmInfo.time.nextDay = true
				}else{
					if(hour<10){
						hour = '0'+hour
					}
				}
				this.confirmInfo.time.hour2 = hour+':'+min
				this.confirmInfo.hour = this.hours
				this.price = (this.roomDetail.price * this.hours).toFixed(2)
				this.vipPrice = (this.roomDetail.vipPrice * this.hours).toFixed(2)
				let confirmInfo = this.confirmInfo
				this.footerTime = (confirmInfo.time.nowDay?(confirmInfo.time.nowDay.split('-')[0]+'月'+confirmInfo.time.nowDay.split('-')[1]+'日'):confirmInfo.time.day) +' '+confirmInfo.time.hour+'~'+(confirmInfo.time.nextDay?'次日'+confirmInfo.time.hour2:confirmInfo.time.hour2)
			},

      beforeReservation() {
        if(!this.roomDetail.status){
          uni.showToast({
            title:'当前包厢已停止使用',
            icon:'none'
          })
          return
        }
        if(!this.confirmInfo.hour){
          uni.showToast({
            title:'请选择时长和开始时间',
            icon:'none'
          })
          return
        }
        if(!this.checkVip()) {
          this.rechargeDialog = true;
          return;
        }
        this.reservation();
      },

      checkVip() {
        return this.user.isVip;
      },

			//预约
			reservation(){
				let number = this.confirmInfo.hour*2+1
				let arr = []
				for(let i=0;i<number;i++){
					arr.push(this.confirmInfo.time.time+(30*60*1000*i))
				}
				let isTrue = true
				this.useTimeRange.forEach((item) => {
					arr.forEach((item2) => {
						if(item2>=item.startTime && item2<=item.endTime){
							isTrue = false
						}
					})
				})
				if(!isTrue){
          uni.showToast({
            duration: 3000,
            title:'连续可用时长不足' + this.confirmInfo.hour + '小时，请重新选择',
            icon:'none',
            mask: true
          })
					return
				}
				let source = {
					roomInfo:this.roomDetail,
					confirmInfo:this.confirmInfo,
					isVip: this.checkVip()
				}
				uni.navigateTo({
					url:'/pages/user/order/submitOrder?source='+JSON.stringify(source)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F5F6F8;
	}

	.page {
		z-index: 0;

		.pagebg {
			position: fixed;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 222rpx;
			z-index: -1;
		}

		.wrap {
			margin: 10rpx;
			// padding-bottom: 230rpx;

			.room {
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(0, 0, 0, 0.08);
				border-radius: 12rpx;
				padding: 20rpx;
				display: flex;

				.img {
					width: 200rpx;
					height: 280rpx;
					border-radius: 12rpx;
					margin-right: 18rpx;
				}

				.roomInfo {
					width: 0;
					flex: 1;

					.title {
						font-size: 32rpx;
						color: #333333;
						line-height: 24rpx;
						margin-top: 10rpx;
					}

					.status {
						width: 90rpx;
						height: 36rpx;
						background: rgba(255, 80, 165, 0.2);
						border-radius: 4rpx;
						line-height: 36rpx;
						text-align: center;
						font-size: 20rpx;
						font-weight: 400;
						color: #FF50A5;
						margin-top: 20rpx;
            position: absolute;
            right: 10px;
            top: 0;
					}

					.tip {
						margin-top: 26rpx;

						.title {
							font-size: 24rpx;
							color: #333333;
						}

						.txt {
							margin-top: 20rpx;
							font-size: 22rpx;
							font-weight: 400;
							color: #666666;
							line-height: 30rpx;
							padding-right: 10rpx;
						}
					}
				}
			}

			.timeContent {
				margin-top: 20rpx;
				border: 2rpx solid $uni-color-primary;
				overflow: hidden;

				.head {
					height: 68rpx;
					background: $uni-color-primary;
					border-radius: 12rpx 12rpx 0rpx 0rpx;
					line-height: 68rpx;
					text-align: center;
					font-size: 28rpx;
					color: #FFFFFF;
				}

				.center {
					padding: 20rpx;
					background: #fff;
					.flowx{
						overflow-x: auto;
						&::-webkit-scrollbar{
							display: none;
						}
					}
					.dateList {
						width: 1100rpx;
						padding: 10rpx 0 20rpx 0;
						display: flex;
						align-items: center;

						.item {
							width: 148rpx;
							height: 90rpx;
							border: 2px solid #999999;
							border-radius: 8rpx;
							text-align: center;
							font-size: 24rpx;
							font-weight: 400;
							color: #666666;
							line-height: 45rpx;
							margin-right: 20rpx;

              .more {
                line-height: 90rpx;
              }
						}

						.active {
							border: 3px solid $uni-color-primary !important;
							background: rgba(195, 225, 230, 0.2) !important;
							color: #333 !important;
						}
					}

					.hours {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.item {
							height: 50rpx;
							background: #F7F7F7;
							border-radius: 5rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #333333;
							line-height: 50rpx;
							padding: 0 20rpx;

							&.active {

								background: rgba(195, 225, 230, 0.2);

								border: 2px solid $uni-color-primary;
							}
						}
					}

					.customer {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						font-size: 28rpx;
						color: #333;
						margin-top: 20rpx;

						.icon {
							width: 50rpx;
							height: 50rpx;
							border-radius: 50%;
							text-align: center;
							line-height: 50rpx;
							margin: 0 10rpx;
							display: inline-block;
						}

						.reduce {
							border: 1rpx solid $uni-color-primary;
							color: $uni-color-primary;
						}

						.add {
							background-color: $uni-color-primary;
							color: #fff;
						}
					}

					.hourlist {
						margin-top: 20rpx;
						display: flex;
						flex-wrap: wrap;
						overflow-y: auto;
						.item {
              border: 1px solid #F4F4F4;
							width: 120rpx;
							background: #F7F7F7;
							border-radius: 12rpx;
							padding: 10rpx 0;
							text-align: center;
							//margin-bottom: 20rpx;
							//margin-right: 20rpx;
							border: 2rpx solid #F7F7F7;
							//box-sizing: border-box;
              margin: 10rpx auto;

							&.active {
								border: 2rpx solid $uni-color-primary;
								background: rgba(195, 225, 230, 0.2);
							}
							&.disabled{
                color: #878F9E;
								border: 2rpx solid #E1E5E8;
                background: #E1E5E8;
							}

							&:nth-of-type(3n) {
								margin-right: 0 !important;
							}

							.title {
								font-size: 30rpx;
								color: #333333;
								//line-height: 24rpx;
							}

							.status {
								font-size: 24rpx;
								//font-weight: 400;
								color: #666666;
								//line-height: 24rpx;
								//margin-top: 8rpx;
							}
						}
					}
				}

			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 230rpx;
		background: #fff;
		z-index: 99;
		padding: 0 30rpx;

		.time {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			line-height: 40rpx;
			margin-top: 30rpx;
		}

		.btns {
			width: 690rpx;
			height: 84rpx;
			border-radius: 42rpx;
			margin-top: 30rpx;
			display: flex;
			overflow: hidden;
			.left {
				width: 400rpx;
				line-height: 84rpx;
				padding-left: 50rpx;
				background: #333333;
				color: #fff;
        display: flex;
        font-size: 38rpx;
        font-weight: bold;

        .price-text {
          margin-left: 10rpx;
          font-size: 24rpx;
          font-weight: normal;
        }
			}

			.right {
				width: 240rpx;
				background: $uni-color-primary;
				text-align: center;
				line-height: 84rpx;
        color:#FFFFFF
			}
		}
	}

  .swiper {
    /*width: 100%;
    swiper-item {
      width: 100%;
    }*/
  }

  .recharge-dialog {
    padding: 30rpx 30rpx;
    .title {
      text-align: center;
      font-weight: bold;
      font-size: 32rpx;
      padding: 0 0 10rpx 0;
    }
    .content {
      //display: flex;
      font-size: 32rpx;
      line-height: 38rpx;
      .diff-price {
        color: #FF50A5;
        font-size: 38rpx;
        font-weight: bold;
        margin: 0 10rpx;
      }
    }
    .recharge-dialog-btns {
      margin-top: 60rpx;
      display: flex;
      .cancel-btn {
        text-align: center;
        width: 40%;
        line-height: 60rpx;
        border-radius: 50rpx;
        color: $uni-color-primary;
        border: 1px solid $uni-color-primary;
        font-weight: bold;
        margin: 0 auto;
      }
      .confirm-btn {
        text-align: center;
        width: 40%;
        background: $uni-color-primary;
        line-height: 60rpx;
        border-radius: 50rpx;
        color: #FFFFFF;
        margin: 0 auto;
      }
    }
  }
</style>
